<template>
 <div id="notFound">
   <div class="img">
     <img src="@/assets/img/404.gif" alt="">
   </div>
   <div class="text">
     <span class="not">
       呃(⊙﹏⊙)。。。很遗憾，没有找到该内容，请检查网址输入是否正确或者稍后刷新重试
     </span>
     <p>{{num}}秒后，将跳转回首页，若未能成功跳转，请 <router-link to="/">点击这里</router-link></p>
   </div>
 </div>
</template>
 
<script>
export default {
  name: '',
  data(){
    return{
      num:5,
    }
  },
  mounted(){
    let time = setInterval(()=>{
      this.num--
      if(this.num<=0){
        clearInterval(time)
        this.$router.replace("/")
      }
    },1000)
  }
}
</script>

<style scoped lang='less'>
#notFound{
  width: 1000px;
  height: 500px;
  margin: 20px auto;
  text-align: center;
  user-select: none;
  .img{
    width: 600px;
    height: 360px;
    margin: 10px auto 0;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .text{
    .not{
      color: purple;
      font-size: 17px;
      margin-bottom: 20px;
      display: block;
    }
  }
}
</style>